<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html2canvas</title>
</head>
<style>

</style>
<body style="text-align: center;">
<h1 style="text-align: center;color: #68728c;font-size: 20px;">原始标签</h1>
<div class="source" style="width: 320px;height: 320px;margin: 0 auto;">
  <div style="padding: 10px; background: #347fff;width: 300px;height: 300px;margin: 0 auto;">
    <h4 style="color: #ffffff;">Hello world!</h4>
    <div class="circle"
         style="width: 50px;height: 50px;border-radius: 50px;background-color: #fff;margin: 0 auto;"></div>
  </div>
</div>
<h1 style="text-align: center;color: #68728c;font-size: 20px;">html2canvas生成的canvas</h1>
<div class="target"></div>
<h1 style="text-align: center;color: #68728c;font-size: 20px;">canvas2image生成的img</h1>
<div class="photo"></div>
<script src="jquery-3.2.1.js"></script>
<script src="html2canvas.js"></script>
<script src="canvas2image.js"></script>
<script>
    html2canvas($(".source")[0], {scale: 1}).then(canvas => {
        $('.target').append(canvas);
        $('.photo').append(Canvas2Image.convertToImage(canvas, 320, 320, 'png'));
    });
</script>
</body>
</html>